<template>
  <div style="margin-top: 5px;">
    <titleBox text="市场主体" @click="show = !show"></titleBox>
    <div class="content"
      :style="{ height: show ? height + 'px' : '0px', transition: 'height 0.5s ease-in-out', overflow: 'hidden' }">
      <div ref="content" style="padding: 20px 10px;border: 1px solid #11afc180;display: flex;">
        <div>
          <div class="item" :class="isChecked == i ? 'item_checked' : ''" @mouseenter="isChecked = i"
            v-for="(item, i) in data" :key="i">
            <div class="icon"></div>
            <div class="name">{{ item.name }}</div>
          </div>
        </div>

        <div style="flex:1;" class="detail" v-if="data.length > 0">
          <div class="detail_top">
            <div class="left">现有</div>
            <div class="center">{{ data[isChecked].num }}家</div>
            <div class="right">占比{{ data[isChecked].point }}%</div>
          </div>
          <div style="margin-top: 5px;">
            <!-- <div style="background-image: url('/img/myimg/line.png'); background-size:100% 1px; width:100%; height:1px;"></div>
            <div style="display: flex; width:100%; align-items:center;">
              <div style="position:relative;display: flex;align-items:center; padding:5px 10px 5px 0px; flex:1; justify-content: space-between;">
                <div>
                  <div style="font-size: 9px;">年同比增长</div>
                  <div style="font-size: 10px;">{{ data[isChecked].year_tb }}家</div>
                </div>
                <div style="font-size: 9px;">
                  +{{ data[isChecked].year_tb_point }}%
                </div>
                <div style=" position:absolute; top:2px; right:0px; width:30px;height:30px; background-image:url('/img/myimg/xj.png'); background-size: 30px 30px;">
                </div>
              </div>
              <div style="position:relative; display: flex;align-items:center; padding:5px 0px 5px 10px; flex:1; justify-content: space-between;">
                <div>
                  <div  style="font-size: 9px;">年环比增长</div>
                  <div  style="font-size: 10px;">{{ data[isChecked].year_hb }}家</div>
                </div>
                <div  style="font-size: 9px;">
                  +{{ data[isChecked].year_hb_point }}%
                </div>
                <div style=" position:absolute; top:5px; right:-10px; width:30px;height:30px; background-image:url('/img/myimg/ss.png'); background-size: 30px 30px;">
                </div>
              </div>
            </div> -->
            <div
              style="background-image: url('/img/myimg/line.png'); background-size:100% 1px; width:100%; height:1px;">
            </div>

          </div>
          <div>
            <div class="detail_item" v-for="(item, i) in data[isChecked].record" v-show="i < 3" :key="item.id">
              {{ item.name }}
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>
<script setup>
import { ref, onMounted, nextTick } from "vue"
import $api from "@/utils/request.js"
import titleBox from "../mConponents/titleBox.vue"
const isChecked = ref(0)
const content = ref(null)
const height = ref(0)
const show = ref(false)
onMounted(() => {
  getData()
})
const getData = async () => {
  const res = await $api.get("api/index/getSczt")
  if (res.code === 1) {
    data.value = res.data
    nextTick(() => {
      height.value = content.value.offsetHeight
      // show.value = true
    })
  }
}
const data = ref([])


</script>
<style scoped lang="less">
.content {
  background-color: #001a1dcc;
  border-radius: 5px;
  width: 330px;
  margin-top: 5px;

  .item {
    display: flex;
    align-items: center;
    padding: 10px 10px;

    .icon {
      width: 10px;
      height: 10px;
      background: linear-gradient(180deg, #FBFEFF 0%, #096771 100%);
      transform: rotate(-45deg);
      margin-right: 10px;

    }

    .name {
      color: rgba(193, 244, 255, 1);
      font-family: PingFang SC;
      font-size: 11px;
      letter-spacing: 0%;
    }
  }

  .item_checked {
    background: linear-gradient(180deg, rgba(0, 86, 86, 0) 0%, #005656 100%);
    border-bottom: 2px solid rgba(87, 255, 255, 1)
  }

  .detail {
    padding: 12px;
    border-top-right-radius: 16px;
    border-bottom-right-radius: 16px;
    background: rgba(0, 26, 50, 0.5);
    border: 2px solid rgba(87, 255, 255, 1);

    .detail_top {
      display: flex;
      align-items: center;

      .left {
        color: rgba(255, 149, 0, 1);
        font-size: 11px;
      }

      .center {
        color: rgba(193, 244, 255, 1);
        font-size: 11px;
        flex: 1;
        padding: 0 10px;
      }

      .right {
        color: rgba(255, 149, 0, 1);
        font-size: 11px;
      }
    }

    .detail_item {
      color: rgba(238, 249, 255, 1);
      font-size: 10px;
      height: 30;
      padding-top: 6px;
      padding-right: 10px;
      padding-bottom: 6px;
      padding-left: 10px;
      margin-top: 6px;
      background: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);
      border: 1px solid;

      border-image-source: linear-gradient(180deg, rgba(77, 222, 207, 0) 0%, rgba(77, 222, 207, 0.1) 100%);


    }
  }
}
</style>
